.dialog-box {
  width: 100%;
  height: 100%;
}

.fa-buttons {
  height: fit-content;
}

.fa-buttons fa-button {
  margin: .5em;
}

.info-rows {
  padding: 1em 0 0;
}

/* 九宫格，自动，每行3格：*/

.icon-cells-box {
  margin: 15px 5px;
  background: #fff;
  border-radius: 5px;
}

.icon-cells-box>.icon-cell-caption {
  border-bottom: solid 1px #ccc;
  width: 100%;
}

.icon-cells-box>.icon-cell-caption.text {
  padding: 1em;
}

.icon-cells-box>.icon-cell-caption.tab {
  padding: 0 .3em;
}

.icon-cells>.icon-cell {
  position: relative;
  width: 33.3%;
  height: 8em;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
}

.icon-cells>.icon-cell.btns {
  height: 10em;
  padding: 1em 0 0;
}

.icon-cells>.icon-cell>.badge {
  width: 2em;
  height: 2em;
  position: absolute;
  top: .5em;
  right: .5em;
  background: #f00;
  color: #fff;
  border-radius: 100%;
  font-weight: 900;
}

.icon-cells>.icon-cell:nth-child(3n) {
  border-right: solid 0;
}

.icon-cells>.icon-cell:nth-last-child(1), .icon-cells>.icon-cell:nth-last-child(2):nth-child(3n-1), .icon-cells>.icon-cell:nth-last-child(2):nth-child(3n+1), .icon-cells>.icon-cell:nth-last-child(3):nth-child(3n+1) {
  border-bottom: solid 0;
}

.icon-cells>.icon-cell>i.fa {
  font-size: 3em;
  margin-bottom: .2em;
}

.icon-cells>.icon-3 {
  height: 5em;
  padding: 1em 0 0;
  margin: 1em;
}

.icon-cells>.icon-3>i.fa {
  position: relative;
  font-size: 3em;
  margin-bottom: .2em;
}

.icon-cells>.icon-3>i.fa>i {
  position: absolute;
  right: -.5em;
  bottom: -.5em;
  font-size: .4em;
  background: rgba(255, 255, 255, .5);
  color: #33c;
  border-radius: .3em;
  padding: 2px;
}

/* The end: 九宫格，自动，每行3格， the end. */

dj-form.my-form+.fa-buttons, dj-form.my-form {
  padding: 1em 1.5em .5em;
}

dj-form.my-form {
  display: block;
}

dj-form.my-form>dj-form-item-host.mode-edit>*>.b {
  background: #ffffff;
  height: 3em;
}

.flow-form {
  background: #f7f7f7;
}

[html-content]>p {
  margin: 0;
}

/* 面板 */

.dj-panel {
  margin: 15px 5px;
  background: #fff;
  border-radius: 5px;
}

.dj-panel>.caption {
  border-bottom: solid 1px #ccc;
  border-radius: 5px 5px 0 0;
  padding: 5px;
}

.dj-panel>.item {
  border-bottom: solid 1px #ccc;
  padding: 5px;
}

.dj-panel>.item:last-child {
  border-bottom: solid 0;
  border-radius: 0 0 5px 5px;
}

[resize-x],[resize-y]{position: relative;}
[resize-x]::after{
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  width:3px;
  height: 100%;
  border-left: solid 1px #fff;
  border-right: solid 1px #888;
  background: #ccc;
  cursor: ew-resize;
}
[resize-y]::before{
  content: ' ';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height:3px;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #888;
  background: #ccc;
  cursor:ns-resize;
}


.page-btn-fixed{
  position: fixed;
  width: 30px;
  height: 30px;
  z-index: 1000;
  border-radius: 50%;
}

.page-btn-fixed.rt,
.page-btn-fixed.rt1 { top: 10px; right: 10px; }
.page-btn-fixed.rt2 { top: 10px; right: 50px; }